<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
    		padding:0;
    		margin:0;
    	}
        #body {background-image:url(img/c.jpg);}
        #div1{z-index:-1;height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;border-radius:25px;}
        .a1{
        	width:100%;
        	height:80px;
        	background-color:rgb(129,83,0);
        	/*z-index:99;*/
        }
        .a1>div{
        	float:left;
        	background-color: rgb(117,73,0);
        	width:100px;
        	height:40px;
        	margin-top:20px;
        	color:rgb(146,116,30);
        	line-height:40px;
        	text-align:center;
        	margin-left:50px;
        	z-index:999;
        }
        .a3{
        	display:none;
        	z-index:9999;
        }
        .a2:hover .a3{
        	z-index:9999;
        	background-color: aquamarine;
        	display:block;
        }
        /*div:not(#div1){
        	opacity:0.9;
        }*/
       div{
       	opacity: 0.9;
       }



        .a18{
        	color:rgb(208,188,65);
        	position:absolute;
        	top:55px;
        	right:50px;
        	height:50px;
        	width:100px;
        	font-size:25px;
        	text-align:center;
        	line-height:50px;
        }
        
        .a4{
        	margin-top:20px;
          width:25%;
          height:400px;
          float:left;
        }

    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        <!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
//      document.onmousemove=function(even)
//      {
//          var oDiv=document.getElementById('div1');
////            document.body  Chrome专用
//          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//          var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//
//              var oEvent=even||event;
//              oDiv.style.top = (scrollTop+oEvent.clientY-25)+"px";
//              oDiv.style.left=(scrollLeft+oEvent.clientX-25)+"px";
//      }
$(document).mousemove(function(e){
	var oDiv=$('#div1');
	var scrollTop=$(document).scrollTop()||$('body').scrollTop();
	var scrollLeft=$(document).scrollLeft()||$('body').scrollLeft();
	oDiv.animate({top:(scrollTop+e.clientY-25)+"px",left:(scrollLeft+e.clientX-25)+"px"},18);
})

    </script>
</head>
<body id="body">
	<div class="a1">
		<div class="a2">首页	
		   <div class='a3'>
		   <div style="height:10px;width:100%;background-color:white;"></div>	
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   </div>
		</div>
		<div>起源历史</div>
		<div>糖画知识</div>
		<div>街市文化</div>
		<div>艺术展示</div>
	</div>
	<!--<div>
		<img src="img/timg.jpg" />
	</div>-->
    <div class="a4">
             民间故事
    </div>
    <div class="a5">
    	据糖画老艺人白世云、樊德然、黎永成等回忆，相传唐代四川大诗人陈子昂在家乡时，很喜欢吃黄糖（蔗糖），不过他的吃法却与众不同。一代才子会首先将糖溶化，在清洁光滑的桌面上倒铸成各种小动物及各种花卉图案，待凝固后拿在手上，一面赏玩一面食用，自觉雅趣脱俗。后来陈子昂到京城长安游学求官，因初到京师人地两生，只做了一个小吏。闲暇无事时，便用从家乡带去的黄糖如法炮制，以度闲暇。一天，陈子昂正在赏玩自己的“作品”。谁知宫中太监带着小太子路过，小太子看见陈子昂手中的小动物，便吵着要。太监问明这些小动物是用糖做的时，便要了几个给太子，欢欢喜喜回宫去了。谁知回宫后小太子将糖吃完了，哭着吵着还要，惊动了皇上，太监只好上前如实回禀。皇上听完原委，立即下诏宣陈子昂进宫，并要他当场表演。陈子昂便将带去的黄糖溶化，在光洁的桌面上倒了一枚铜钱，用一支竹筷粘上送到小太子手中，小太子立即破啼为笑。皇上心中一高兴，脱口说出“糖饼（儿）”两字，这就是“糖饼（儿）”这一名称的由来。由此陈子昂便得到了升迁，官至右拾遗。后来，陈子昂解衣归里后，为了纪念皇上的恩遇，同时也因闲居无聊，便收了几个徒弟传授此技。这些徒弟又传徒弟，并将它传向四方。有的干脆以此为业，走邨串乡做起糖饼儿生意来。这糖饼儿生意虽小，但因曾得到过皇帝的赏识，所以生意十分兴隆，学的人越来越多，并代代相传，这一技艺从此就流传下来。在一些大街小巷里经常会看见糖饼儿人的身影，周围围着一圈好奇的人儿。
    </div> 
    
    <div class="a18">街市文化</div>

<div id="div1" >
</div>
</body>
</html>


